<%@ include file="/common/common.jsp"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<head>
<!--添加弹层效果和layui-->
<script type="text/javascript" src="<%=jsPath%>/layer/layer.js"></script>
<style>
.button{
    width:120px;
    height:35px;    
}
.mytable{
    text-align: center;
}

.mytable td{
    font-size: 16px;
    width:110px;
    height: 30px;
    border:1px solid rgb(129, 104, 243);
    text-align: center;    
}

</style>
<script>
    /*
    1.获取主页面上的通道数量信息和当前通道数据保存字符串
    2.根据数量信息和保存字符串，显示控件
    3.用户点击获取按钮，获取新的字符串，调用父页面方法显示视频，关闭弹层
    */
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    var num = 0;
    var oldStr = "";
    $(document).ready(function () {
        try {
            // var rowData = parent.$("#oneAdasAlarmData").datagrid("getSelected");
            initDivs();
            
        } catch (error) {
            console.error("获取报警详细信息错误："+error);
        }
        
    });



    //获取主页面上的通道信息和通道数据保存字符串
    var initDivs = function () {
        // var num = parent.RealTimeVideoPlayers.channelNum;
        // var oldStr = parent.RealTimeVideoPlayers.getChannelsDataStr();
        num = parent.vehicleChannelsNum;
        oldStr = parent.vehicleChannelsDataStr;
        // console.log("车辆视频通道数量：num = " + num + ", 默认通道保存字符串为 :oldstr = " + oldStr);
        showChannels(num, oldStr);

    }

    //显示选择界面
    var showChannels = function (num, oldStr) {
        var oldChannels = oldStr.split(",");
        if (!oldChannels || oldChannels.leng <= 0) {
            console.log("原有信息错误 : " + oldStr);
            oldChannels = [];
        }
        showChannelDivs(num, oldChannels);
        //
    }

    //显示控件
    var showChannelDivs = function (num, oldChannels) {
        var oneLineNum = Math.floor(Math.sqrt(num));
        // console.log("总数为 : " + num + " , 单行数据为：" + oneLineNum);
        if (isNaN(oneLineNum) || oneLineNum < 1 || num < 1) {
            return;
        }

        var html = '<table class="mytable"><tbody><tr>';
        for (var i = 0; i < num; i++) {
            var strTemp = '<a href="javascript:void(0);" onclick="javascript:select(' + (i) + ')">通道' + (i + 1) + '</a>';
            if (oldChannels.indexOf('' + (i + 1)) > -1) {
                html += '<td><input type="checkbox" name="channelIds" checked="true">' + strTemp + '</td>';
            } else {
                html += '<td><input type="checkbox" name="channelIds">' + strTemp + '</td>';
            }
            if ((i + 1) % oneLineNum == 0) {
                if (i == (num - 1)) {
                    html += '</tr>';
                } else {
                    html += '</tr><tr>';
                }
            }
        }
        html += '</tbody></table>';
        // console.log(html);
        $("#channelInput").html(html);
    }



    //点击通道
    var select = function(i){
        // console.log("点击通道 " + i);
        var objs = $('input[name="channelIds"]');
        if (objs && objs.length > 0) {
            objs[i].checked = objs[i].checked ? false : true;
            // console.log("通道选择更改为：" + objs[i].checked);
        }
    }


    //获取车辆通道数据保存字符串
    var getChannelsDataStr = function(){
        var str = "";
        var objs = $('input[name="channelIds"]');
        // console.log(objs);
        if (objs && objs.length > 0) {

            $.each(objs, function (n, obj) {
                if (obj.checked) {
                    if ((n + 1) == objs.length) {
                        str = str + (n + 1);
                    } else {
                        str = str + (n + 1) + ',';
                    }
                }
            });
        }
        if(str.length > 1){
            // console.log(str[str.length -1]);
            if(str[str.length -1] == ","){
                str = str.substring(0,str.length-1);
            }
        }
        console.log("原有的保存字符串为 ： " + oldStr +"新设定的保存字符串为 : " + str);
        if(oldStr != str){
            parent.saveChannelsDataStr(str);//保存信息
        }
        closeLayer();
    }



    //全选
    var selectAll = function(){
        console.log("全选通道");
        var objs = $('input[name="channelIds"]');
        if (objs && objs.length > 0) {
            $.each(objs, function (n, obj) {
                obj.checked = true;
            });
        }
    }

    //全部反选
    var unselectAll = function(){
        console.log("全部反选");
        var objs = $('input[name="channelIds"]');
        if (objs && objs.length > 0) {
            $.each(objs, function (n, obj) {
                obj.checked = obj.checked ? false : true;
            });
        }
    }

    //关闭窗口
    function closeLayer() {
        parent.layer.close(index);//关闭弹窗
    }

</script>

</head>
<body >
    <div style="width:100%;height:100%;text-align:center;">
        <div align="center" id="channelInput""></div>
        <br/>
        <div style="margin-bottom:15px;">
            <input type="button" class="button" onclick="javascritp:selectAll();" value="全选">
            <input type="button" class="button" onclick="javascritp:unselectAll();" value="反选">
            <input type="button" class="button" onclick="javascritp:getChannelsDataStr();" value="确定">
        </div>
    </div>
</body>